<template>
  <a-modal
    title="选择开票名称"
    width="50%"
    :visible="visible"
    :confirmLoading="loading"

    okText="选择"
    @ok="handleChoose"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="10" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.KeyWord" placeholder="名称" />
            </a-form-item>
          </a-col>
          <a-col :md="10" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
            >查询</a-button
            >
            <a-button
              style="margin-left: 8px"
              @click="() => {
                queryParam = {}
                this.pagination.current = 1
                this.getDataList()
              }">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table
      :columns="columns"
      :rowKey="(row) => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: type }"
      :bordered="true"
      size="small"
    >
      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template>
    </a-table>
  </a-modal>
</template>

<script>

const columns = [
  {
    title: '序号',
    dataIndex: 'aId',
    scopedSlots: { customRender: 'dataIndex' },
    width: '50px'
  },
  { title: '名称', dataIndex: 'Taxproductname' },
  { title: '编码', dataIndex: 'Taxproductcode' },
  { title: '规格型号', dataIndex: 'TM_Specs' },
  { title: '单位', dataIndex: 'TM_Unit' },
  { title: '售价', dataIndex: 'TM_UnitPrice' }
]

export default {
  props: {
    type: { type: String, default: 'radio', required: false }
  },
  components: {
  },
  mounted () {

    // this.getDataList()
  },
  data () {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      visible: false,
      UnitGroupId: '',
      TypeName: ''
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    getDataList () {
      console.log('计量单位id' + this.UnitGroupId)
      this.selectedRowKeys = []
      this.selectedRows = []
      this.loading = true
      this.$http
        .post('/InvoiceManagement/Inv_InvoiceApplyMain/GetRDRecordQuery', {
          'PageIndex': this.pagination.current,
          'PageRows': this.pagination.pageSize,
          'SortField': 'TaxproductId',
          'SortType': 'desc',
          'Search': {
            Condition: this.queryParam.KeyWord

          }
        })
        .then((resJson) => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    openChoose (UnitGroupId) {
      console.log('计量单位id' + UnitGroupId)
      this.queryParam = {}
      this.UnitGroupId = UnitGroupId
      this.getDataList()
      this.visible = true
    },
    handleChoose () {
      this.visible = false
      this.$emit('onChoose', this.selectedRows)
    }
  }
}
</script>
<style scoped>
/deep/ .ant-modal{
  top: 10px !important;
}
</style>
